<script>
import axios from 'axios';
//发送size和page，接受blogs和count
//export对应import
export default {
  // 使用data配置页面默认数据
  data() {
    return {
      // 博客列表数据
      blogs: [],
      // 当前页码
      currentPage: 1,
      // 总记录数
      count: 0,
      // 每页显示的记录数
      size: 10
    }
  },
  //配置页面执行时默认运行的方法
  methods: {
    // 获取指定页码的博客数据
    page(currentPage) {
      const _this = this;
      // 发送 GET 请求获取博客数据
      axios.get(`http://localhost:8080/api/blogs?page=${currentPage}&size=${this.size}`).then((res) => {
        //通过res.data获取返回的数据
        console.log(res.data); // 打印返回的数据
        _this.blogs = res.data.blogs; // 更新博客列表数据
        _this.count = res.data.count; // 更新总记录数
      });
    },
    editBlog(blog){
      //TODO
    },
    deleteBlog(id){
      //TODO
    }
  },
  // 组件挂载后执行的方法
  mounted() {
    this.page(this.currentPage); // 初始化时获取第一页数据
  }
}
</script>

<template>
  <!-- 主容器，设置宽度和居中 -->
  <div class="m-container">
    <!-- 博客内容块 -->
    <div class="block">
      <!-- 使用v-for对blogs集合进行遍历 -->
      <div v-for="blog in blogs" :key="blog.id">
        <h3>{{ blog.title }}</h3>
        <p>{{ blog.content }}</p>
        <button @click="editBlog(blog)">Edit</button>
        <button @click="deleteBlog(blog.id)">Delete</button>
      </div>
      <h4>
        当前是第：{{currentPage}}页，每页{{size}}篇,共{{count}}篇
      </h4>
    </div>
  </div>
</template>

<style scoped>

</style>